<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="4">
        <el-select
          v-model="query.disId"
          placeholder="请选择分销商"
          style="width: 250px"
          filterable
          clearable
          @change="getList"
        >
          <el-option
            v-for="dis in disList"
            :label="dis.disName"
            :value="dis.disId"
            :key="dis.disId"
          />
          <!--<el-option label="美博" value="美博"/>
          <el-option label="安徽乐京电器有限公司" value="安徽乐京电器有限公司"/>-->
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.partnerName"
          placeholder="请选择供货商"
          style="width: 250px"
          filterable
          clearable
          @change="getList"
        >
          <el-option
            v-for="partner in partnerList"
            :label="partner.text"
            :value="partner.text"
            :key="partner.text"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.proceedCompany"
          placeholder="请选择收款公司"
          style="width: 250px"
          filterable
          clearable
          @change="getList"
        >
          <el-option
            v-for="proceedCompany in proceedCompanyList"
            :label="proceedCompany.text"
            :value="proceedCompany.value"
            :key="proceedCompany.value"
          />
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchInfo"
        >{{ $t('table.search') }}</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-date-picker
          v-model="query.time"
          :picker-options="pickerOptions"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </el-col>
      <el-col :span="7">最新统计时间：{{ lastTime }}</el-col>
    </el-row>
    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="talelist"
      border
      fit
      highlight-current-row
      style="width: 60%"
    >
      <el-table-column fixed prop="partnerName" label="供货商" width="120" align="center"/>
      <el-table-column fixed prop="disName" label="分销商" width="120" align="center"/>
      <el-table-column fixed prop="disNumber" label="分销商编号" width="120" align="center"/>
      <el-table-column fixed prop="proceedCompany" label="收款公司" width="120" align="center"/>
      <el-table-column fixed prop="getAmount" label="打款金额" width="150" align="center"/>
      <el-table-column fixed prop="sendAmount" label="发货金额" width="120" align="center"/>
      <el-table-column fixed prop="amt" label="剩余金额" width="120" align="center"/>
    </el-table>
  </div>
</template>

<script>
import { selectGroupByDis } from '@/api/payment'
import { getPartnerInfo } from '@/api/shipment'
import { distributorList } from '@/api/payment'
// import { parseTime, pickerOptions } from '@/utils'
import {
  GetCurrMouthStr,
  GetLastMouthStr,
  GetBeforOrAfterDayStr
} from '@/utils/timeUtils'
import { parseTime } from '@/utils'
// import axios from 'axios'

export default {
  data() {
    return {
      showList: false,
      talelist: null,
      listLoading: true,
      query: {
        starTime: null,
        endTime: null,
        disId: null,
        time: null,
        partnerName: null,
        proceedCompany: null,
        supplierName: null
      },
      dataEntity: null,
      lastTime: null,
      disList: null,
      supplierNameList: [
        {
          text: '美博',
          value: '美博'
        },
        {
          text: '星城',
          value: '星城'
        },
        {
          text: '北京盛世',
          value: '北京盛世'
        }
      ],
      proceedCompanyList: [
        {
          text: '深圳唯修汇科技有限公司',
          value: '深圳唯修汇科技有限公司'
        },
        {
          text: '浙江扳手科技有限公司',
          value: '浙江扳手科技有限公司'
        }
      ],
      partnerList: []
    }
  },
  created() {
    this.getPartnerInfo()
    this.getList()
    this.getDistributorList()
  },
  methods: {
    getPartnerInfo() {
      // 查询合作商信息
      getPartnerInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            this.partnerList = response.data.data
          } else {
            console.log('合作商加载失败！')
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    formatterRmb(paymentAmount) {
      if (paymentAmount) {
        var num = paymentAmount
        num = parseFloat(num).toFixed(2)
        return '￥' + num // 返回的是字符串23,245.12保留2位小数
      } else {
        return '￥0.00'
      }
    },
    searchInfo() {
      if (this.query.time !== null && this.query.time !== '') {
        this.query.starTime = parseTime(
          this.query.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.query.endTime = parseTime(
          this.query.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.query.starTime = null
        this.query.endTime = null
      }

      this.getList()
    },
    // 查询收款信息
    getList() {
      this.listLoading = true
      selectGroupByDis(this.query).then(response => {
        if (response.data.data != null) {
          this.talelist = response.data.data.list
          this.lastTime = response.data.data.lastTime
          for (let index = 0; index < this.talelist.length; index++) {
            this.talelist[index].amt =
              this.talelist[index].getAmount - this.talelist[index].sendAmount
          }
          console.info(this.talelist)
          this.dataEntity = []
          for (var index in this.talelist) {
            this.dataEntity[this.talelist[index].disId] = this.talelist[index]
          }

          const items = this.dataEntity
          this.dataEntity = items.map(v => {
            this.$set(v, 'showTal', true)
            return v
          })

          console.info(this.dataEntity)
          if (this.talelist.length > 0) {
            this.showList = false
          } else {
            this.showList = true
          }
        } else {
          this.showList = true
        }
        this.listLoading = false
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleClick(tab, event) {
      console.info(tab.$attrs.value)
      switch (tab.name) {
        case 'first':
          this.query.starTime = GetBeforOrAfterDayStr(-1) + ' 00:00:00'
          this.query.endTime = GetBeforOrAfterDayStr(-1) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'second':
          this.query.starTime = GetCurrMouthStr(1) + ' 00:00:00'
          this.query.endTime = GetCurrMouthStr(2) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'third':
          this.query.starTime = GetLastMouthStr(1) + ' 00:00:00'
          this.query.endTime = GetLastMouthStr(2) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'fourth':
          this.query.starTime = null
          this.query.endTime = null
          this.query.disId = tab.$attrs.value
          this.selectById(true)
          break
        default:
          console.log(5)
      }
    },

    selectById(flg) {
      var vm = this
      selectGroupByDis(this.query).then(response => {
        debugger
        if (response.data.data.length > 0) {
          var list = response.data.data
          for (var index in list) {
            var key = list[index].disId
            const ob = {}
            ob[key] = list[index]
            ob[key].showTal = flg
            vm.dataEntity = Object.assign({}, vm.dataEntity, ob)
          }
        } else {
          const ob = {}
          ob[vm.query.disId] = {
            sendAmount: 0,
            getAmount: 0,
            disName: vm.dataEntity[vm.query.disId].disName,
            showTal: flg
          }
          vm.dataEntity = Object.assign({}, vm.dataEntity, ob)
          console.info(vm.dataEntity)
        }
        console.info(vm.dataEntity)
      })
    },
    // 查询分销商
    getDistributorList() {
      distributorList().then(response => {
        this.disList = response.data.data
      })
    }
  }
}
</script>
<style type="text/css">
.tab {
  box-shadow: 8px 7px 5px #d0cfcf;
  margin-bottom: 20px;
}
.tab:last-child {
  margin-bottom: 0;
}
.tab p {
  font-size: 14px;
}
</style>
